<template>
	<view class="chooseCouponStyle">
		<view class="couponList" :style="{paddingBottom: isIphoneX ? 'env(safe-area-inset-bottom)' : '20rpx'}">
			<view v-for="(item, index) in couponList" :key="item.id" class="couponItem">
				<CouponItem :btnText="'去使用'" :coupon="item" @couponClick="couponClick" />
			</view>
		</view>
		<view v-if="couponList.length == 0 && loading == false" class="emptyArea">
			<image style="width: 316rpx;height: 316rpx;margin-top: 214rpx;"
				src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"></image>
			<label style="margin-top: 20rpx;color: #272A37;font-size: 32rpx;line-height: 44rpx;">暂无可用优惠券</label>
		</view>
		<view class="couponFooter" :style="{paddingBottom: isIphoneX ? 'env(safe-area-inset-bottom)' : '20rpx'}"
			v-if="historyList.length > 0" @click="toHistory">
			<view class="footerBtn">历史优惠券</view>
		</view>
	</view>
</template>

<script>
	import CouponItem from '../components/couponItem/index.vue'
	import utils from '@/common/utils.js'

	export default {
		name: 'myCouponList',
		components: {
			CouponItem
		},
		data() {
			return {
				isIphoneX: false,
				couponList: [],
				historyList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 4
				},
				loading: false,
				noMore: false
			}
		},
		methods: {
			async getCouponList() {
				if (this.noMore) {
					return
				}
				this.loading = true
				try {
					const {
						data
					} = await this.request.httpTokenJsonRequest('/mp-api/wx/coupon/my', this.queryParams,
						'GET')
					this.couponList = utils.filterRepetition([...this.couponList, ...data.list])
					if (data.total <= this.couponList.length) {
						this.noMore = true
					}
				} catch (e) {}
				this.loading = false
				uni.stopPullDownRefresh()
			},
			async getHistoryList() {
				const {
					data
				} = await this.request.httpTokenJsonRequest('/mp-api/wx/coupon/myHistory', this.queryParams,
					'GET')
				this.historyList = data || []
			},
			couponClick(data) {
				if (data.acceptGoodsType === 1) {
					this.$store.commit('setCategoryIdList', data.acceptGoodsSet.split(','))
				}
				if (data.acceptGoodsType === 2) {
					this.$store.commit('setGoodsIdList', data.acceptGoodsSet.split(','))
				}
				uni.navigateTo({
					url: `/packageMall/pages/mallCoupon/index?type=${data.acceptGoodsType}`
				})
			},
			toHistory() {
				uni.redirectTo({
					url: '/packageMine/pages/couponHistoryList/index'
				})
			}
		},
		onPullDownRefresh() {
			this.noMore = false
			this.queryParams.pageNum = 1
			this.getCouponList()
		},
		onReachBottom() {
			if (this.noMore) {
				return
			}
			this.queryParams.pageNum += 1
			this.getCouponList()
		},
		onLoad() {
			utils.checkIphoneX().then(res => this.isIphoneX = res);
			this.getCouponList()
			this.getHistoryList()
		}
	}
</script>

<style lang="scss" scoped>
	.chooseCouponStyle {
		.couponList {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 30rpx 0;
			margin-bottom: 20rpx;
		}

		.couponItem:last-child {
			margin-bottom: 100rpx;
		}

		.couponFooter {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 5;
			width: 100vw;
			padding-top: 20rpx;
			background-color: #FFFFFF;
		}

		.footerBtn {
			height: 44rpx;
			margin: 0 30rpx;
			border-radius: 24rpx;
			line-height: 44rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}

		.emptyArea {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>
